// 宽度容器
.box-w(@w:100%, @background: transparent, @dis: block) {
  width     : @w;
  box-sizing: border-box;
  background: @background;
}

// 高度容器
.box-h(@h:100%, @background: transparent) {
  height    : @h;
  box-sizing: border-box;
  background: @background;
}

// 自定义容器
.box(@w:100%, @h:100%, @background: transparent) {
  width     : @w;
  height    : @h;
  box-sizing: border-box;
  background: @background;
}

// 块级自定义容器
.box-b(@w:100%, @h:100%, @background: transparent) {
  width     : @w;
  height    : @h;
  box-sizing: border-box;
  background: @background;
  display   : block;
}

// 块级自定义容器-背景
.box-bg(@w, @h, @url:'', @size:100%, @dis:block) {
  width     : @w;
  height    : @h;
  box-sizing: border-box;
  display   : @dis;
  .bg(@url, @size);
}

// 行内块自定义容器
.box-i(@w:100%, @h:100%, @background: transparent) {
  width     : @w;
  height    : @h;
  box-sizing: border-box;
  background: @background;
  display   : inline-block;
}

// 弹性盒子容器-居中
.flex-center {
  display        : flex;
  justify-content: center;
  align-items    : center;
}

// 弹性盒子容器-row
.flex-row(@main: flex-start, @cross: center) {
  display        : flex;
  justify-content: @main;
  align-items    : @cross;
}

// 弹性盒子-换行
.flex-wrap {
  .flex-row();
  flex-wrap: wrap;
}

// 弹性盒子容器-col
.flex-col(@main: center, @cross: center) {
  display        : flex;
  flex-direction : column;
  justify-content: @main;
  align-items    : @cross;
}

// 背景图片
.bg(@url, @size:100%, @position:center, @repeat:no-repeat) {
  background-image   : url(@url);
  background-repeat  : @repeat;
  background-position: @position;
  background-size    : @size;
}

// 渐变
.gradient(@c1, @c2, @dire:to right) {
  background-image: linear-gradient(@dire, @c1, @c2);
}

// 文字超出隐藏-单行
.font-one {
  display      : block;
  text-overflow: ellipsis;
  white-space  : nowrap;
  overflow     : hidden;
}

// 文字超出隐藏-多行
.font-hide(@n: 2) {
  display           : -webkit-box;
  -webkit-line-clamp: @n;
  -webkit-box-orient: vertical;
  overflow          : hidden;
  text-overflow     : ellipsis;
  word-break        : break-all; // 断字点换行
  word-wrap         : break-word // 以防万一，强制换行
}

// 文字居中通用，flex在父容器中使用flex-row即可
.font-center(@height: normal) {
  text-align : center;
  line-height: @height;
}

// 文字属性设置
.font-set(@size: inherit, @color: #333, @weight: normal, @style: normal, @family: 'PingFang SC, 黑体,宋体') {
  font : @style @weight @size/normal @family;
  color: @color;
  text-align:justify;
  text-justify:inter-ideograph;
}

// 元素无法选中（乱点不会出现蓝色的背景块）
.sel-hide() {
  -moz-user-select   : none;
  -webkit-user-select: none;
  -ms-user-select    : none;
  -khtml-user-select : none;
  user-select        : none;
}

// 保留文字换行格式
.font-wrap {
  white-space: pre-wrap;
}

// 细线-水平
.border-w(@c: #ddd, @n: .5) {
  width           : 100%;
  height          : 1px;
  border-top      : 1px solid @c;
  color           : @c;
  transform-origin: 0 0;
  transform       : scaleX(@n);
}

// 细线-垂直
.border-h(@c: #ddd, @n: .5) {
  width           : 1px;
  height          : 100%;
  border-left     : 1px solid @c;
  color           : @c;
  transform-origin: 0 0;
  transform       : scaleY(@n);
}

// 方块
.square(@w:100%, @background: transparent) {
  .box-b(@w, @w, @background);
}

// 圆形
.circle(@w:100%, @background: transparent) {
  .square(@w, @background);
  border-radius: 50%;
}

// 非弹性盒子垂直居中(父容器高度已知)
.vertical() {
  position : relative;
  top      : 50%;
  transform: translateY(-50%);
}

// 设置placeholder颜色
.placeholder(@c: #ddd) {
  input::-webkit-input-placeholder {
    color: @c;
  }

  input::-moz-input-placeholder {
    color: @c;
  }

  input::-ms-input-placeholder {
    color: @c;
  }
}

// 遮罩-定位(固定优先)
.mask(@opa: .6, @index: 999) {
  position: fixed;
  top     : 0;
  left    : 0;
  z-index : @index;
  .square();
  background: rgba(0, 0, 0, @opa);
}

//二维居中-定位(固定优先)
.cross(@position: fixed, @index: 99) {
  position : @position;
  top      : 50%;
  left     : 50%;
  z-index  : @index;
  transform: translateX(-50%) translateY(-50%);
}

//上方-定位(绝对优先)
.top(@offset: 0, @position: absolute, @index: 99) {
  position : @position;
  top      : @offset;
  left     : 50%;
  z-index  : @index;
  transform: translateX(-50%);
}

//下方-定位(绝对优先)
.bottom(@offset: 0, @position: absolute, @index: 99) {
  position : @position;
  bottom   : @offset;
  left     : 50%;
  z-index  : @index;
  transform: translateX(-50%);
}

//左侧-定位(绝对优先)
.left(@offset: 0, @position: absolute, @index: 99) {
  position : @position;
  top      : 50%;
  left     : @offset;
  z-index  : @index;
  transform: translateY(-50%);
}

//右侧-定位(绝对优先)
.right(@offset: 0, @position: absolute, @index: 99) {
  position : @position;
  top      : 50%;
  right    : @offset;
  z-index  : @index;
  transform: translateY(-50%);
}

// 左上方(绝对优先)
.left-top(@left: 0, @top: 0, @position: absolute, @index: 99) {
  position: @position;
  left    : @left;
  top     : @top;
  z-index : @index;
}

// 左下方(绝对优先)
.left-bottom(@left: 0, @bottom: 0, @position: absolute, @index: 99) {
  position: @position;
  left    : @left;
  bottom  : @bottom;
  z-index : @index;
}

// 右上方(绝对优先)
.right-top(@right: 0, @top: 0, @position: absolute, @index: 99) {
  position: @position;
  right   : @right;
  top     : @top;
  z-index : @index;
}

// 右下方(绝对优先)
.right-bottom(@right: 0, @bottom: 0, @position: absolute, @index: 99) {
  position: @position;
  right   : @right;
  bottom  : @bottom;
  z-index : @index;
}